<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bilibili</title>
<link rel="shortcut icon" href="favicons/1.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header id="header">
  <div id="page_top">
    <div class="bg-wrap">
      <div class="bg"></div>
      <div class="mask"></div>
    </div>
    <div class="header-top">
      <div class="page-width clearfix">
        <div class="header-top__nav">
          <ul>
            <li class="item item-home">
              <a href="#">
              主站
              </a>
            </li>
            <li class="item">
              <a href="#">
              画友
              </a>
            </li>
            <li class="item">
              <a href="#">
              游戏中心
              </a>

            </li>
          </ul>
        </div>
        <div class="header-top__user">
          <div class="login-box">
            <a href="#">
            登录
            </a>
            <span></span>
            <a href="#">
            注册
            </a>
          </div>
          <div class="user-post">
            <a href="#" class="link">
            投 稿
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="header-c">
    <div class="page-width">
      <p id="header_title"></p>
      <div id="search" class="clearfix">
        <div class="search-rank">排行榜</div>
        <div class="search-box">
          <input type="text" class="text" placeholder="Search here...">
          <a href="#" class="btn">
          <i></i>
          </a>
          <div class="search-history">
            <div class="title">历史搜索</div>
          </div>
        </div>
      </div>
      <div class="header-title">哔哩哔哩 (゜-゜)つロ 干杯~</div>
    </div>
  </div>
</header>
<nav id="nav">
  <div class="page-width clearfix">
    <ul class="nav-list">
      <li class="item item-home">
        <a href="#" class="link">
        首页
        </a>
      </li>
      <li class="item">
        <a href="#" class="link">
        <div class="num"><i>887</i></div>
        动画
        </a>
        <ul class="nav-item__hover">
          <li>
            <a href="#">
            <em>MAD·AMV<i></i></em>
            </a>
          </li>
          <li>
            <a href="#">
            <em>MMD·3D<i></i></em>
            </a>
          </li>
          <li>
            <a href="#">
            <em>短片·手书·配音<i></i></em>
            </a>
          </li>
          <li>
            <a href="#">
            <em>综合<i></i></em>
            </a>
          </li>
        </ul>
      </li>
    </ul>
    <div class="nav-gif"><img src="images/cont/nav_img.gif" alt="求领养"></div>
  </div>
</nav>
<div id="banner">
  <div class="page-width clearfix">
    <div class="slider fl">
      <div class="slider-img">
        <a href="#" slider-title="pic1">
        <img src="images/cont/slider_img1.png" alt="#">
        </a>
      </div>
      <div class="slider-title">
        <p>pic1</p>
      </div>
      <div class="slider-btn">
        <span class="cur"></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <a href="#" class="slider-more">
      More
      </a>
    </div>
    <div class="banner-list fr">
      <ul>
        <li>
          <a href="https://live.bilibili.com/197082?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.4">
          <img src="images/cont/1.jpg" alt="#">
          <div class="info">
            <p class="title">【MV】猫／まふまふ×かいりきベア【本人歌唱版】</p>
            <p class="author">up主：Mafumafu_Channel</p>
            <p class="play">播放：66666</p>
          </div>
          </a>
        </li>
      </ul>
      <a href="#" class="btn btn-prev">
      昨日
      </a>
      <a href="#" class="btn btn-next">
      一周
      </a>
    </div>
  </div>
</div>
<div id="main">
  <div class="page-width">
    <!-- 推广 -->
    <div class="mainCont clearfix" id="promote">
      <div class="pic-list fl">
        <div class="pic-list__title">
          <i class="icon icon-promote"></i>
          <h2>推广</h2>
          <a href="#" class="promote-link">
          来感受创作的力量吧！
          </a>
        </div>
        <ul class="pic-list__wrapper clearfix">
          <li class="item">
            <a href="#" class="img-link">
            <img src="images/cont/2.jpg" alt="#">
            <span class="mask"></span>
            <span class="time">3:39</span>
            </a>
            <div class="img-info">
              <a href="#">
                平行线 - Eve × suis from ヨルシカ MV
              </a>
            </div>
          </li>
          <li class="item">
            <a href="#" class="img-link">
            <img src="images/cont/7.jpg" alt="#">
            <span class="mask"></span>
            <span class="time">3:39</span>
            </a>
            <div class="img-info">
              <a href="#">
                队长，别说唱了 ！
              </a>
            </div>
          </li>
        </ul>
      </div>
      <div class="main-side fr">
        <div class="promote-side__title">
          <a href="#">
          在线人数：114514
          </a>
          <span>|</span>
          <a href="#">
          最新投稿：1919
          </a>
        </div>
        <a href="#" class="promote-side__img">
        <img src="images/cont/10.jpg" alt="#">
        </a>
      </div>
    </div>
    
    <!-- 直播 -->
    <div class="mainCont clearfix" id="live" js-move="true">
      <div class="pic-list fl">
        <div class="pic-list__title">
          <i class="icon icon-live"></i>
          <h2>正在直播</h2>
          <p class="live-online">当前共有<em>1234</em>个在线直播</p>
          <div class="more-wrap">
            <a href="#" class="dynamic">
            <i></i>12条新动态
            </a>
            <a href="#" class="more">
            更多<i></i>
            </a>
          </div>
        </div>
        <ul class="pic-list__wrapper clearfix">
          <li class="item">
            <a href="#" class="img-link">
            <img src="images/cont/13.jpg" alt="#">
            <span class="mask"></span>
            <img class="headImg" src="images/cont/live_headImg1.jpg" alt="#">
            <i class="icon-live">Live</i>
            </a>
            <div class="img-info">
              <a href="#">
                【真相】2021拜年纪改名的原因竟然是！！？
              </a>
              <div class="btm">
                <div class="user"><i></i>哔哩哔哩</div>
                <div class="online"><i></i>7777777</div>
              </div>
            </div>
          </li>
          <li class="item">
            <a href="#" class="img-link">
            <img src="images/cont/14.jpg" alt="#">
            <span class="mask"></span>
            <img class="headImg" src="images/cont/live_headImg1.jpg" alt="#">
            <i class="icon-live">Live</i>
            </a>
            <div class="img-info">
              <a href="#">
                今天是国服之夜
              </a>
              <div class="btm">
                <div class="user"><i></i>水无月菌</div>
                <div class="online"><i></i>1111111</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="main-side fr" js-tab="true">
        <div class="main-side__title">

          <div class="tab-title">
            <a href="#" class="cur">
            为你推荐
            </a>
            <a href="#">
            关注的主播
            </a>
          </div>
        </div>
        <div class="main-side__cont">
          <div class="tab-cont">
            <div class="slider-ov tab-cont__item">
              <div class="slider">
                <div class="slider-img">
                  <a href="#" slider-title="pic1">
                  <img src="images/cont/3.jpg" alt="#">
                  </a>
                  <a href="#" slider-title="pic2">
                  </a>
                  <a href="#" slider-title="pic3">
                  </a>
                </div>
                <div class="slider-title">
                  <p>pic1</p>
                </div>
                <div class="slider-btn">
                  <span class="cur"></span>
                  <span></span>
                  <span></span>
                </div>
              </div>
              
            </div>
            <div class="live-focus tab-cont__item">
              <span>空</span>
            </div>
          </div>
        </div>
      </div>
    </div>

<footer id="footer">
  <div class="page-width">
    <ul class="footer-c clearfix">
      <li>
        <h6>bilibili</h6>
        <a href="#" class="card">
        关于我们
        </a>
        <a href="#" class="card">
        友情链接
        </a>
      </li>
    </ul>
  </div>
</footer>

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/script.js"></script>
</body>
</html>